<template>
  <div class="container">
    <div class="left-panel">
      <div class="today">
        <div class="title">
          <span>当前天气</span>
          <span>{{ time }}</span>
        </div>
        <div class="weather">
          <i :class="`qi-${weather?.now.icon || 110}-fill`"></i>
          <div class="temperature">
            <span class="num">{{ weather?.now.temp || '' }}</span>
            <span class="unit">℃</span>
          </div>
          <div class="weather-info">
            <span class="weather-text">{{ weather?.now.text || '' }}</span>
            <span class="feels-like">体感温度 {{ weather?.now.feelsLike || '' }}°</span>
          </div>
        </div>
        <div class="details">
          <p>今天预计天气晴朗。较为潮湿，最高气温{{ weather?.now.feelsLike || '' }}°。</p>
          <div class="detail-items">
            <div class="item">
              <div class="Aqi">
                <el-tooltip class="box-item" effect="dark" placement="bottom">
                  <template #content>
                    <p>空气{{ QualityDescription || '' }}</p>
                    <p>主要污染物 {{ QualityData?.pollutants[0].name || '' }}</p>
                  </template>
                  <span class="desc">空气质量</span>
                </el-tooltip>
              </div>

              <span class="Data">
                <svg
                  width="14"
                  height="14"
                  viewBox="0 0 10 14"
                  class="aqiColorCycle-DS-EntryPoint1-1"
                >
                  <circle
                    cx="5"
                    cy="8"
                    r="4"
                    :fill="
                      AirQualityEvaluation.rgbToHex(
                        QualityData?.indexes[0].color.red || 0,
                        QualityData?.indexes[0].color.green || 255,
                        QualityData?.indexes[0].color.blue || 0,
                      )
                    "
                  ></circle>
                </svg>
                {{ QualityData?.indexes[0].aqi || '' }}</span
              >
            </div>
            <div class="item">
              <div>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  placement="bottom"
                  :content="`${weather?.now.windDir} ${weather?.now.windScale}级`"
                >
                  <span class="desc">风速</span>
                </el-tooltip>
              </div>
              <span class="Data">{{ weather?.now.windSpeed }} km/h</span>
            </div>
            <div class="item">
              <div>
                <el-tooltip class="box-item" effect="dark" placement="bottom">
                  <template #content>
                    <p style="max-width: 215px">
                      相对于空气在当前温度下所能包含的最大水分量，空气中存在的水分量
                    </p>
                  </template>
                  <span class="desc">湿度</span>
                </el-tooltip>
              </div>
              <span class="Data">{{ weather?.now.humidity }}%</span>
            </div>
            <div class="item">
              <div>
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  placement="bottom"
                  :content="VisibilityDescription"
                >
                  <span class="desc">能见度</span>
                </el-tooltip>
              </div>
              <span class="Data">{{ weather?.now.vis }}公里</span>
            </div>
            <div class="item">
              <div>
                <el-tooltip class="box-item" effect="dark" placement="bottom">
                  <template #content>
                    <p style="max-width: 215px">
                      建议:
                      {{ weatherIncludes[0]?.text || '暂无数据' }}
                    </p>
                  </template>
                  <span class="desc">紫外线指数</span>
                </el-tooltip>
              </div>
              <span class="Data"
                >{{ weatherIncludes[0]?.level || '--' }}
                {{
                  AirQualityEvaluation.getUVIndexDescription(weatherIncludes[0]?.level) || '0'
                }}</span
              >
            </div>
            <div class="item">
              <div>
                <el-tooltip class="box-item" effect="dark" placement="bottom">
                  <template #content>
                    <p style="max-width: 215px">
                      气压是大气中空气的重量。它被归纳 为标准大气压力 1,013.25 mb (29.9212
                      inHg)。较高的气压通常与晴 朗的天气相关，较低的气压与暴风雨 天气相关。
                    </p>
                  </template>
                  <span class="desc">气压</span>
                </el-tooltip>
              </div>
              <span class="Data">{{ weather?.now.pressure }} hPa</span>
            </div>
            <div class="item" v-if="weather?.now.dew">
              <div>
                <el-tooltip class="box-item" effect="dark" placement="bottom">
                  <template #content>
                    <p style="max-width: 215px">
                      使空气中水分凝结成液态水(例如露水) 所需要降至的温度。露点越高，感觉 越“闷热”。
                    </p>
                  </template>
                  <span class="desc">露点</span>
                </el-tooltip>
              </div>
              <span class="Data">{{ weather?.now.dew }}°</span>
            </div>
            <div class="item" v-if="weather?.now.dew">
              <div>
                <el-tooltip class="box-item" effect="dark" placement="bottom">
                  <template #content>
                    <p style="max-width: 215px">体感温度是指人体感受到的空气温度</p>
                  </template>
                  <span class="desc">体感温度</span>
                </el-tooltip>
              </div>
              <span class="Data">{{ weather?.now.feelsLike }}°</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect, computed } from 'vue'
import { useWeatherStore } from '@/stores/weather'
import type { IAirQuality, IWeather, Daily } from '@/types/weather'
import { weatherIncludes_CN } from '@/types/weather'
import AirQualityEvaluation from '@/services/leftPage'

const weatherStore = useWeatherStore()
const date = new Date()
// 时间函数
const time = ref(`${date.getHours()}:${date.getMinutes()}`)
const weather = ref<IWeather>()
// 空气质量
const QualityData = ref<IAirQuality>()
// 天气指数

const weatherIncludes = computed<Daily[]>(() => {
  const data = weatherStore.currentLocation?.indices
  if (!data || !data.daily) {
    return []
  }

  return data.daily.filter((item) => {
    return item.name === weatherIncludes_CN[5]
  })
})
// 使用 watchEffect 自动追踪依赖并响应变化
watchEffect(() => {
  weather.value = weatherStore.currentLocation?.weather
  QualityData.value = weatherStore.currentLocation?.airQuality
})

const QualityDescription = computed(() => {
  return AirQualityEvaluation.getAirQualityDescription(QualityData.value?.indexes[0].aqi)
})

const VisibilityDescription = computed(() => {
  return AirQualityEvaluation.getVisibilityDescription(Number(weather.value?.now.vis))
})
</script>
<style scoped lang="scss">
@use '@/assets/customVar.scss' as *;
.AirQuality {
  --el-dropdown-menuItem-hover-fill: none;
  --el-dropdown-menu-box-shadow: none;
  outline: none;
}

.container {
  display: flex;
  border-radius: 5px;
  background-color: transparent;
  gap: 1.25rem;

  .left-panel {
    box-shadow: $box-shadow;
    flex: 1;
    padding: $padding;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);

    .today {
      .title {
        //display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        span:first-child {
          font-size: 18px;
          font-weight: bold;
          display: block;
        }

        span:last-child {
          font-size: 14px;
        }
      }

      .weather {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        i {
          font-size: 60px;
        }

        .temperature {
          margin: 0 15px;

          .num {
            font-size: 35px;
            font-weight: bold;
          }

          .unit {
            font-size: 18px;
            vertical-align: top;
          }
        }

        .weather-info {
          display: flex;
          flex-direction: column;

          .weather-text {
            font-size: 18px;
            margin-bottom: 5px;
          }

          .feels-like {
            font-size: 14px;
          }
        }
      }

      .details {
        p {
          margin-bottom: 10px;
        }

        .detail-items {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
          gap: 10px;

          .item {
            display: flex;
            flex-direction: column;

            div {
              span {
                font-size: 14px;
              }
            }

            .Data {
              font-size: 16px;
              font-weight: bold;
            }
          }
        }
      }
    }
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .container {
    gap: 1rem;

    .left-panel {
      padding: 1rem 1.5rem;
    }
  }
}

@media (max-width: 768px) {
  .container {
    gap: 0.75rem;

    .left-panel {
      padding: 1rem;

      .today {
        .title {
          span:first-child {
            font-size: 16px;
          }

          span:last-child {
            font-size: 12px;
          }
        }

        .weather {
          i {
            font-size: 50px;
          }

          .temperature {
            margin: 0 10px;

            .num {
              font-size: 30px;
            }

            .unit {
              font-size: 16px;
            }
          }

          .weather-info {
            .weather-text {
              font-size: 16px;
            }

            .feels-like {
              font-size: 12px;
            }
          }
        }

        .details {
          .detail-items {
            grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
            gap: 8px;

            .item {
              div span {
                font-size: 12px;
              }

              .Data {
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
